<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"   href="/static/layui/css/layui.css" />
</head>
<body>
<div class="layui-container">
	<!-- 写搜索内容 -->
	<div>
		<div class="layui-form layui-form-pane" >
			<div class="layui-form-item"> 
				<div class="layui-inline">
					<label class="layui-form-label">
						账号
					</label>
					<div class="layui-input-inline">
						<input  class="layui-input" placeholder="用户账号" id="userName"  name="userName"/>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">
						名称
					</label>
					<div class="layui-input-inline">
						<input  class="layui-input" placeholder="用户名称"  id="realName" />
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">
						角色
					</label>
					<div class="layui-input-inline">
						<select id="type">
							<option value="">请选择角色</option>
							<option value="1">管理员</option>
							<option value="2">业务员</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<button class="layui-btn" id="searchBtn">搜索</button>		
				</div>
			</div>
				
		</div>
	</div>
	<!-- 显示数据的table -->
	<div>
		<table id="dataTable"  lay-filter="dataTableFilter"></table>
	</div>
</div>
<!-- 工具栏模板 -->
<!-- 头工具栏 -->
<script type="text/html" id="headerBtns">
	<button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
	<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</button>
</script>
<!-- 行工具栏 -->
<script type="text/html" id="rowBtns">
	<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="reset">重置密码</button>
</script>
<!-- 新增用户信息模板 -->
<script type="text/html" id="editForm">
	<div style="padding-left:100px;padding-top:20px">
	<form class="layui-form layui-form-pane" >
		<input  type="hidden" name="service" value="add" />
		<div class="layui-form-item"> 
				<div class="layui-inline">
					<label class="layui-form-label">
						账号
					</label>
					<div class="layui-input-inline">
						<input  class="layui-input" placeholder="用户账号"  name="userName" lay-verify="required" lay-reqText="请输入账号" />
					</div>
				</div>
		</div>
		<div class="layui-form-item"> 
				<div class="layui-inline">
					<label class="layui-form-label">
						密码
					</label>
					<div class="layui-input-inline">
						<input  class="layui-input" placeholder="密码" name="password"  value="123456" readonly="readonly"/>
					</div>
				</div>
		</div>
		<div class="layui-form-item"> 
				<div class="layui-inline">
					<label class="layui-form-label">
						姓名
					</label>
					<div class="layui-input-inline">
						<input  class="layui-input" placeholder="姓名" name="realName" lay-verify="required" lay-reqText="请输入姓名"/>
					</div>
				</div>
		</div>
		<div class="layui-form-item"> 
				<label class="layui-form-label">
						角色
					</label>
					<div class="layui-input-inline">
						<select name="type">
							<option value="2">业务员</option>
							<option value="1">管理员</option>
						</select>
				</div>
		</div>
		<input type="hidden" lay-submit lay-filter="submitFormFilter" id="submitFormBtn"  />
	</form>
</div>
</script>

<script type="text/javascript" src="/static/layui/layui.js"> </script>
<script type="text/javascript" >
	layui.use(['table','jquery','layer','form'],  function(){
		var table = layui.table
		, $ = layui.jquery
		, layer = layui.layer
		,form = layui.form;

		//第一个实例
		var tab = table.render({
			id:"idTest"
			,elem: '#dataTable'  // 要展示数据的table id值
			// ,height: 500 // 整体表格高度
			,url: '/user/user.do?service=list' //后端数据接口
			,page: true //开启分页
			,height: 'full-100'
			// ,cellMinWidth: 50
			,limit: 10
			,toolbar: '#headerBtns' //开启头部工具栏，并为其绑定左侧模板
			,cols: [[ //表头 field表示Java属性 title 表示列名 sort表示当前列支不支持排序
				{type: 'checkbox', fixed: 'left'}
				,{field: 'id', title: 'ID',  sort: true}
				,{field: 'userName', title: '用户名'}
				,{field: 'password', title: '密码' }
				,{field: 'realName', title: '真实姓名'}
				,{field: 'img', title: '头像'}
				,{field: 'type', title: '类型', sort: true , templet:function (data) { //data 表示当前行的数据
						if(data.type == 1){
							return "管理员";
						}else{
							return "业务员";
						}
					}}
				,{field: 'isDel', title: '启用',  sort: true}
				,{field: 'createTime', title: '创建时间', sort: true  , templet: function (data) {
						return timeFommater(data.createTime)
					}}
				,{field: 'modifyTime', title: '修改时间', sort: true }
				,{fixed: 'right', title:'操作', toolbar: '#rowBtns', width:150}
	]]
			,response: {
				statusCode: 200 //规定成功的状态码，默认：0
			}
			,parseData: function(res){ //res 即为原始返回的数据 resultData
				// console.log(res)
				return {
					"code": res.code, //解析接口状态
					"msg": res.msg, //解析提示文本
					"count": res.data.totalCount, //解析数据长度
					"data": res.data.data //解析数据列表
				};
			}
		});

		function timeFommater(value) {
			var dateee = new Date(value).toJSON();
			var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
			return date;
		}

		//点击事件
		$("#searchBtn").click(function () {
			var $userName = $("#userName").val();
			var $realName = $("#realName").val();
			var $type = $("#type").val();

			tab.reload({
				where:{
					userName : $userName ,
					realName : $realName ,
					type : $type
				}
			})

		})

		//监听事件 监听头工具栏
		table.on('toolbar(dataTableFilter)', function(obj){ 	// object 代表整个当前表格
			var checkStatus = table.checkStatus("idTest"); //	获取id为idTest 的table表格中的被多选框选中的内容
			let data = checkStatus.data;   // checkStatus.data 被多选框选中的数据 数组

			switch(obj.event){
				case 'add':
					add(); // 调用新增方法，不需要参数
					break;
				case 'del':
					del(data); // 调用删除，需要知道要删除的id
					break;
			};
		});

		//新增一条数据
		function add() {
			layer.open({
				id:"add"
				,type:1 // 设置为页面层
				,title:'新增'
				,content: $("#editForm").html() //jquery对象 想使用里面的内容，用 .html()方法  js对象 .innerHTML
				,area: ['500px', '450px']
				,btn: ['确定', '取消'] 	//可以无限个按钮
				,btnAlign: 'c'
				,yes: function(index, layero){
					//do something
					// layer.close(index); //如果设定了yes回调，需进行手工关闭
					$("#submitFormBtn").click();


				}
				,success: function(layero, index){
				//	重新加载表格
					form.render();
					//监听表单中的提交按钮是否提交
					form.on('submit(submitFormFilter)',function(data){
						// alert("新增提交")
						$.post("/user/user.do?service=add",data.field,function(rs){
							//判断业务编码(跟JsondData code相关)
							var res = JSON.parse(rs);
							// alert(res)
							if(res.code == 504){
								//添加用户名重复
								layer.msg(res.msg)
								// 防止表单提交
								return false;
							}else{ //成功或者其他原因失败
								layer.msg(res.msg)
								layer.close(index); //如果设定了yes回调，需进行手工关闭
								return false;
							}
						});
					});
				}
 			});
		}

		// 删除方法
		function del(data){
			if (data.length == 0 ){ // 没有选择要删除的数据
				layer.msg("请至少选择一个要删除的数据！")
				return false;
			}else { // 选择了要删除的数据
			//	将所有的id，获取出来
				var ids = "";
				$.each(data , function (index , value ) {
					// alert(value.id) 将所有的id合并成一个字符串 &7&8&9&10
					ids = ids +value.id +"&" ;
 				})
				layer.confirm('确定要重置当前用户的密码吗?', function(index){ // index 当前弹框的下标数
					$.post("/user/user.do?service=delete",{"ids":ids},function (rs) {
						let parse = JSON.parse(rs); // 将json字符串转成json对象
						if (parse.code == 200){ // 判断是否修改成功
							layer.msg(parse.msg)
							$("#searchBtn").click(); // 重载表格数据
						}
						layer.msg(parse.msg); //打印错误信息
					})
					layer.close(index); // 关闭弹出层
				});

			}
		}


		//监听 行 工具条
		table.on('tool(dataTableFilter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			// alert(data.id)
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			if(layEvent == "reset"){ // 判断重置密码
			//	执行重置密码的方法
				layer.confirm('确定要重置当前用户的密码吗?', function(index){ // index 当前弹框的下标数
					$.post("/user/user.do?service=reset",{"id":data.id},function (rs) {
						let parse = JSON.parse(rs); // 将json字符串转成json对象
						if (parse.code == 200){ // 判断是否修改成功

							layer.msg(parse.msg)
							$("#searchBtn").click(); // 重载表格数据
						}
						layer.msg(parse.msg); //打印错误信息
					})
					layer.close(index); // 关闭弹出层
				});
			}
		});


	});

</script>
</body>
</html>